<template>
  <div class="login-container">
    <a-row>
      <a-col></a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
        <div class="login-container-form">
          <div class="login-container-hello">欢迎登录</div>
          <div class="login-container-title">保镖人才网管理中心</div>
          <a-form
            ref="formRef"
            :model="form"
            style="padding: 0px 25px"
            :rules="rules"
            @keyup.enter="handleSubmit"
          >
            <a-form-item name="username">
              <a-input
                v-model:value="form.username"
                autocomplete="off"
                placeholder="请输入账号"
              >
                <template v-slot:prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input-password
                v-model:value="form.password"
                style="width: 400px; height: 50px"
                autocomplete="off"
                placeholder="请输入密码"
              >
                <template v-slot:prefix>
                  <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input-password>
            </a-form-item>
            <a-form-item class="formitem" >
              <a-input placeholder="请输入验证码" style="width:270px"></a-input>
              <div @click="refreshCode" style="width:100px;height:35px;float:right;margin-right:20px;" >
                <SIdentify/>
              </div>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="handleSubmit()"> 登录 </a-button>
            </a-form-item>
          </a-form>
        </div>
      </a-col>
    </a-row>
  </div>
  <div class="randomBackground" :style="randomBackground"></div>
</template>

<script lang="ts">
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue"
import { LoginFrom } from "@/types/views/login";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import { computed } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import SIdentify from "./SIdentify.vue";
export default defineComponent({
  name: "login",
  components: {
    UserOutlined,
    LockOutlined,
    SIdentify
  },
  setup() {
    // 表单数据
    const form = data_form();

    const rules = reactive({
      username: [
        {
          required: true,
          message: "请输入账号",
          trigger: "change",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "change",
        },
      ],
    });

    const formRef =ref()

    const store = useStore();

    const router = useRouter();

    /**
     * @desc: 登录提交
     * @param 无
     */
    const handleSubmit = (): void => {
      formRef.value.validate().then(() => {
        store
          .dispatch("user/login", form)
          .then((e) => {
            const route = router.currentRoute.value;
            const url = route.query.redirect || "/";
            router.push(url as string);
          })
          .catch((err) => {
            message.error(err.message || err.data.message);
          });
      });
    };
    // 图形验证码
    let identifyCodes = "1234567890";
    let identifyCode = ref("3212");

    const randomNum = (min:any, max:any) => {
      return Math.floor(Math.random() * (max - min) + min);
    };

    const makeCode = (o:any, l:any) => {
      for (let i = 0; i < l; i++) {
        identifyCode.value += o[randomNum(0, o.length)];
      }
    };

    const refreshCode = () => {
      identifyCode.value = "";
      makeCode(identifyCodes, 4);
    };

    onMounted(() => {
      identifyCode.value = "";
      makeCode(identifyCodes, 4);
    });
    return { formRef, form, rules, handleSubmit,identifyCode,refreshCode,identifyCodes,randomNum ,makeCode};
  },

  computed: {
    randomBackground() {
      // 计算body的可用高度
      let cHeight =
        window.outerHeight - (window.outerHeight - window.innerHeight);
      // 存放要更换的图片
      let imgs = [
        "http://houtai.74cmsse.tywangcai.com/admin/static/img/3.46ce6a13.jpg",
        "http://houtai.74cmsse.tywangcai.com/admin/static/img/1.8fe91190.jpg",
        "	http://houtai.74cmsse.tywangcai.com/admin/static/img/5.99bf6490.jpg",
        "http://houtai.74cmsse.tywangcai.com/admin/static/img/2.3d4f6d41.jpg",
        "http://houtai.74cmsse.tywangcai.com/admin/static/img/4.bc5c9a4c.jpg",
      ];
      console.log(cHeight)
      let imgName = imgs[Math.floor(Math.random() * 5)]; //进行计算随机
      let style =
        "background-image:url('" +
        imgName +
        "'); background-repeat: round; height:" +
        939 +
        "px;";
      return style;
    },
  },
});

function data_form() {
  const form: UnwrapRef<LoginFrom> = reactive({
    username: undefined,
    password: undefined,
  });
  return form;
}
</script>
<style scoped>
.formitem{
  display: flex;
}
</style>
<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background-size: cover;
  overflow: hidden;
  & .login-container-form {
    width: 540px;
    height: 466px;
    padding: 4vh;
    margin: 237px 0 0 690px;
    background-size: 100% 100%;
    border-radius: 5px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    background-color: #fff;
    & .login-container-hello {
      font-size: 26px;
      text-align: center;
      margin-top: -5px;
    }
    & .login-container-title {
      margin-bottom: 30px;
      margin-top: -1px;
      font-size: 14px;
      color: #999;
      text-align: center;
    }
  }
  .login-container-tips {
    position: fixed;
    bottom: 10px;
    width: 100%;
    height: 40px;
    color: rgba(255, 255, 255, 0.856);
    text-align: center;
  }
}
</style>
<style lang="scss">
.login-container {
  & .login-container-form {
    & .ant-col {
      width: 100%;
      padding: 0 9px 0 9px;
    }
    & .ant-input {
      height: 35px;
    }
    & .ant-btn {
      width: 100%;
      height: 45px;
      border-radius: 5px;
    }
    & .ant-form-item-explain-error {
      color: #faad14;
    }
    & .ant-form-item-has-error {
      border-color: #faad14;
    }
  }
}
.randomBackground {
  width: 100%;
  // height: 10000px;
  background-size: cover;
  background-position: center 100;
  background-repeat: no-repeat;
  margin-top: -939px;
}
</style>